<template>
    <main-wrap class="ptp1">
        <div class="weui-cells__title">已选择：<span class="blue">{{rtypetext}}</span></div>
        <div class="weui-cells">
            <div class="weui-cell weui-cell_select weui-cell_select-before">
                <a class="weui-cell weui-cell_access" href="javascript:;" @click="showActionSheet">
                    <p>{{curBuilding || default_building_str}}</p>
                    <input type="hidden" ref="buildingID" :value="curBuildingID || default_building_id" />
                    <div class="weui-cell__ft"></div>
                </a>
                <div class="weui-cell__bd pl0">
                    <input class="weui-input" placeholder="楼层+房间号或地址" v-model="addrtext">
                </div>
            </div>
        </div>
        <div class="weui-cells__title">故障描述</div>
        <my-textarea @areatextchg="areatextchg" :stext="descritext" ref="descriarea"></my-textarea>

        <my-uploader ref="uploader"></my-uploader>

        <div class="weui-cells" v-if="rolecode !== '4'">
            <a class="weui-cell weui-cell_access appointLine" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>指定负责人</p>
                </div>
                <router-link :to="'/userlist'" class="weui-cell__ft">
                    <span v-if="principalUName === ''" class="gray">选填</span>
                    <span v-else class="weui-form-preview__value black">{{principalUName}}</span>
                </router-link>
            </a>
        </div>

        <div class="weui-cells">
            <a class="weui-cell weui-cell_access appointLine" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>预约时间</p>
                </div>
                <router-link :to="'/appoittime'" class="weui-cell__ft">
                    <span v-if="this.user_report_select_times_str === ''" class="gray">请选择{{allowtimenum}}个时间段</span>
                    <span v-else class="weui-form-preview__value black">{{user_report_select_times_str}}</span>
                </router-link>
            </a>
        </div>

        <div class="paddingP3 mtp4">
            <a href="javascript:;" class="weui-btn weui-btn_primary" :class="{'weui-btn_disabled': btnDisabled}" @click="gonext">立即预约</a>
        </div>

        <div id="actionSheet_wrap" v-show="actionSheetDisplay">
            <div class="weui-mask_transparent actionsheet__mask"></div>

            <div class="weui-skin_android" id="weui-android-actionsheet">
                <div class="weui-mask" @click="hideActionSheet"></div>
                <div class="weui-actionsheet">
                    <div class="weui-actionsheet__menu">
                      <div class="weui-actionsheet__cell" v-for="item in building_data" :key="item.id" @click="selectBuilding(item.id, item.name)">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import MyTextarea from '@/components/mytextarea'
import MyUploader from '@/components/myuploader'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Info',
  data () {
    return {
      actionSheetDisplay: false,
      btnDisabled: true,
      rtype: this.$route.params.ty,
      rtypetext: this.$route.params.tyname,
      curBuilding: '',
      curBuildingID: '',
      addrtext: '',
      descritext: '',
      allowtimenum: 3,
      principalUName: '',
      rolecode: localStorage.rolecode ? localStorage.rolecode : '0'
    }
  },
  computed: {
    ...mapState(['building_data', 'user_report_select_times', 'user_report_upload_items']),
    ...mapGetters(['user_report_select_times_str', 'default_building_str', 'default_building_id'])
  },
  watch: {
    addrtext () {
      // if (this.addrtext.length > 10) {
      //   this.$store.commit('set_global_error_show', true)
      //   this.$store.commit('set_global_error_text', '地址长度不能超过10个字符')
      // } else {
      //   this.$store.commit('set_global_error_show', false)
      //   this.$store.commit('set_global_error_text', '')
      // }
      this.addrtext = this.addrtext.substring(0, 10)
      this.checkinput()
    },
    descritext () {
      this.checkinput()
    },
    user_report_upload_items () {
      this.checkinput()
    }
  },
  components: {
    MainWrap,
    MyTextarea,
    MyUploader
  },
  mounted () {
    this.cm.overscroll(document.querySelector('.mainWrap'))
  },
  activated () {
    if (localStorage.reportinfofrom === '/') { // 从首页来则不缓存页面
      this.addrtext = ''
      this.descritext = ''
      this.$refs.descriarea.cleardata()
      this.$refs.uploader.cleardata()
      this.empty_user_report_select_times()
      this.empty_user_report_upload_items()
      localStorage.principalUID = ''
      localStorage.principalUName = ''
      this.principalUName = ''

      this.rtype = this.$route.params.ty
      localStorage.reporttype = this.rtype
      this.rtypetext = this.$route.params.tyname

      this.curBuilding = ''
      this.curBuildingID = ''
    } else if (localStorage.reportinfofrom === '/userlist') {
      this.empty_user_report_select_times()
      this.allowtimenum = localStorage.principalUID === '' ? 3 : 1
      this.principalUName = localStorage.principalUName
    }

    this.checkinput()
  },
  methods: {
    ...mapMutations(['empty_user_report_select_times', 'empty_user_report_upload_items']),
    showActionSheet () {
      this.actionSheetDisplay = true
    },
    hideActionSheet () {
      this.actionSheetDisplay = false
    },
    selectBuilding (bid, bname) {
      this.curBuildingID = bid
      this.curBuilding = bname
      this.actionSheetDisplay = false
    },
    gonext () {
      if (!this.btnDisabled) {
        this.$toast.loading({
          duration: 0,
          message: '请稍等...'
        })

        let params = {
          attachment: this.user_report_upload_items,
          appointment: this.user_report_select_times,
          labelId: this.rtype,
          buildingId: this.curBuildingID !== '' ? this.curBuildingID : this.default_building_id,
          address: this.addrtext,
          desc: this.descritext,
          principal: localStorage.principalUID
        }
        this.cm.myajax('/sys/userrepair/save', params, (data) => {
          this.$toast.clear()
          // this.$router.push({
          //   path: '/opersucc',
          //   query: {
          //     mainbtntext: '我的报修单',
          //     mainbtnurl: '/orders',
          //     subbtntext: '继续报修',
          //     showAD: false
          //   }
          // })
          this.$router.push('/orderdetail/' + data.repairId)
        }, () => {
          this.$toast.clear()
        })
      }
    },
    areatextchg (text) {
      this.descritext = text
    },
    checkinput () {
      if (this.addrtext !== '' && this.descritext !== '' && this.user_report_select_times_str !== '' && this.user_report_upload_items.length > 0) {
        this.btnDisabled = false
      } else {
        this.btnDisabled = true
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    localStorage.reportinfofrom = from.path
    next()
  }
}
</script>

<style lang="stylus" scoped>
.appointLine .weui-cell__bd
    flex none
.appointLine .weui-cell__ft
    flex 1
.weui-form-preview__value
    white-space pre-wrap

.weui-actionsheet
  max-height calc(100vh - 50px)
  overflow scroll
</style>
